<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-slider {
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.mui-icon-email .mui-badge {
				top: 6px;
				right: 2px;
				left: auto;
			}
			
			.logo {
				height: 30px;
				vertical-align: middle;
			}
		</style>
	</head>
 
	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 class="mui-title" id="title"><img src="images/logo.png" class="logo"></h1>
			<button id='message' class="mui-pull-right mui-btn-link" style="color: inherit;"><span class="mui-icon iconfont icon-message1" style="font-size: 22px;"><span id="messageBadge"></span></span></button>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
				<span class="mui-icon iconfont icon-circle"></span>
				<span class="mui-tab-label">还款</span>
			</a>
			<a class="mui-tab-item" href="getcash.html">
				<span class="mui-icon iconfont icon-bankcard"></span>
				<span class="mui-tab-label">取现</span>
			</a>
			<a id="list" class="mui-tab-item" href="bill.html">
				<span class="mui-icon iconfont icon-bill3"></span>
				<span class="mui-tab-label">账单</span>
			</a>
			<a class="mui-tab-item" href="account.html">
				<span class="mui-icon iconfont icon-User"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>

		<script src="js/mui.min.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			//mui初始化
			mui.init();
			
			var wvs = {"getcash":null, "bill":null, "account":null, "home":null}; 
			var subpages = ['getcash.html', 'bill.html', 'account.html', 'home.html'];
			var subpage_style = {
				top: '44px',
				bottom: '51px'
			};
			var aniShow = {};
			var $wvMessage, $wvLogin;

			//当前激活选项
			var activeTab = subpages[3];
			var $title = document.getElementById("title");
			var logoHTML = '<img src="images/logo.png" class="logo">';

			//创建子页面，首个选项卡页面显示，其它均隐藏；
			mui.plusReady(function() {
				plus.screen.lockOrientation("portrait-primary");

				var settings = app.getSettings();
				var state = app.getState();

				$wvLogin = mui.preload({
					"id": 'login.html',
					"url": 'login.html'
				});

				$wvMessage = mui.preload({
					id: "message",
					url: "message.html"
				});

				var self = plus.webview.currentWebview();
				for(var i = 0; i < 4; i++) {
					var temp = {};					
					if(!plus.webview.getWebviewById(subpages[i])) {
						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
						
						wvs[subpages[i].replace(".html", "")] = sub;
						
						if(i == 3) {
							sub.show();
							temp[subpages[i]] = "true";
							mui.extend(aniShow, temp);
						}
						self.append(sub);
					}
				}

				// 监听在线消息事件
				plus.push.addEventListener("receive", function(msg) {
					//logoutPushMsg( msg );
					var json = JSON.parse(msg.payload);
					switch(json.type) {
						case 0: //账号在其它手机登录
							app.otherLogin();
							break;
						case 1: //充值
							console.log("充值");
							break;
						default:
							break;
					}
				}, false);

				// close splash
				setTimeout(function() {
					//关闭 splash
					plus.navigator.closeSplashscreen();
				}, 1000);
			});

			//选项卡点击事件
			mui('.mui-bar-tab').on('tap', 'a', function(e) {
				var targetTab = this.getAttribute('href');
				if(targetTab == activeTab) {
					return false;
				}

				if(targetTab == "bill.html" || targetTab == "account.html") {
					if(!app.isLogin()) {
						app.openLogin();
						return false;
					}
				}
				
				var title = targetTab == "home.html" ? logoHTML : this.querySelector('.mui-tab-label').innerText;

				switch(targetTab) {
					case "getcash.html": 
						title = "";
						break;
					case "bill.html":
						wvs.bill && wvs.bill.evalJS("init()");
						break;
					case "account.html":
						wvs.account && wvs.account.evalJS("init()");
						break;
				}

				//更换标题
				$title.innerHTML = title;

				//显示目标选项卡
				//若为iOS平台或非首次显示，则直接显示
				if(mui.os.ios || aniShow[targetTab]) {
					plus.webview.show(targetTab);
				} else {
					//否则，使用fade-in动画，且保存变量
					var temp = {};
					temp[targetTab] = "true";
					mui.extend(aniShow, temp);
					plus.webview.show(targetTab, "fade-in", 300);
				}
				//隐藏当前;
				plus.webview.hide(activeTab);
				//更改当前活跃的选项卡
				activeTab = targetTab;
				
				return;
			});

			//自定义事件，模拟点击“首页选项卡”
			document.addEventListener('gohome', function() {
				toggleTab('defaultTab');
			});

			document.getElementById("message").addEventListener('tap', function() {
				$wvMessage.show("slide-in-right");
			});

			//当程序从后台切换到前台时会触发此事件
			document.addEventListener("resume", function() {
				//refreshAsset();
			}, false);

			//设备网络状态发生时会触发此事件
			document.addEventListener("netchange", app.onNetChange, false);
			
			setMessageBadge = function (enabed) {
				var $badge = $id("messageBadge");
				if(enabed){
					addClass($badge, "mui-badge");
				}
				else{
					removeClass($badge, "mui-badge");
				}
			}

			toggleTab = function(tabID) {
				var tab = document.getElementById(tabID);
				//模拟首页点击
				mui.trigger(tab, 'tap');
				//切换选项卡高亮
				var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
				if(tab !== current) {
					current.classList.remove('mui-active');
					tab.classList.add('mui-active');
				}
			};

			toLogin = function() {
				//$.fire(mainPage, 'show', null);
				setTimeout(function() {
					$wvLogin.show('pop-in');
				}, 0);
			};

			refresh = function(islogin) {
				console.log("refresh");
				window.setTimeout(function () {
					wvs.account && wvs.account.evalJS("init()");
					wvs.home && wvs.home.evalJS("refresh()");
					wvs.bill && wvs.bill.evalJS("init()");
				}, 1000);
			};
			
			mui.oldBack = mui.back;
			var backButtonPress = 0;
			mui.back = function(event) {
				console.log("update back");
				backButtonPress++;
				if(backButtonPress > 1) {
					plus.runtime.quit();
				} else {
					plus.nativeUI.toast('再按一次退出应用');
				}
				setTimeout(function() {
					backButtonPress = 0;
				}, 1000);
				return false;
			};
			
			//自动在线更新
			setTimeout(function(){
				mui.checkUpdate(function(key) {
					if(key) {
						console.log("有新版本更新");
						mui.downWgt(true);
					}
				}, true);
			}, 2000);
		</script>
	</body>

</html>